<template>
  <div class="app-container documentation-container">
      <p>
    <br/>
</p>
<p>
    <span >亲爱的艺术创作者：</span>
</p>
<p>
    <span ><br/></span>
</p>
<p>
    <span >当前使用的系统页面为简版， 请先阅读此篇作品及视频指引。</span>
</p>
<p>
    <span ><br/></span>
</p>
<p>
    <span >1.&nbsp; 上传作品：当前最多上传1000幅作品。点击菜单中“上传作品”，每次上传一幅。</span>
</p>
<p>
    <span ><br/></span>
</p>
<p>
    <span >上传后，审核需大约12个小时，审核成功即可展示到馨艺页面。</span>
</p>
<p>
    <span ><br/></span>
</p>
<p>
    <span >2.&nbsp; 上传创作短视频：最多上传5个短视频作品。</span>
</p>
<p>
    <span ><br/></span>
</p>
<p>
    <span >上传后，审核需大约12个小时，审核成功即可展示到馨艺页面。</span>
</p>
<p>
    <span ><br/></span>
</p>
<p>
    <span >3.&nbsp; 作品及短视频的格式要求均在上传页展示。</span>
</p>
<p>
    <span ><br/></span>
</p>
<p>
    <span >4.&nbsp; 上传后，如需删除和修改（自动功能尚未开放），请联系人工服务 4000-010-182&nbsp; &nbsp;</span>
</p>
<p>
    <span ><br/></span>
</p>
<p>
    <span >&nbsp; &nbsp; &nbsp;</span>
</p>
<p>
    <span >有任何问题，请立即拨打服务热线 4000-010-182&nbsp;</span>
</p>
<p>
    <br/>
</p>
  <div class="userfile" @click="tozuopin" >
          上传作品
        </div>

          <div class="userfile" @click="toshipin" >
         上传短视频
        </div>
  </div>
</template>

<script>
import DropdownMenu from '@/components/Share/DropdownMenu'
import { mapGetters } from 'vuex'
import {Circle, Popup} from 'vant'
import Vue from 'vue'
 
import digitaSign from '@/components/page/case/digitaSign';
 Vue.use(Circle);
Vue.use(Popup)


export default {
  name: 'Documentation',
  components: { DropdownMenu },
    computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles',
      'cardname',
      'introduction'
    ])
  },
  data() {
    return {
      havesign:false,
      popcontent:null,
      sign:false,
      show2:false,
      show:false,
       currentRate:0,
            rate:100,
            rate2:2,
            text:'',
        uploadImage5: require('@/assets/images/case/signname.png'),
      articleList: [
        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
        { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
        { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
        { title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
      ]
    }
  },
  components:{
digitaSign

  },
  mounted(){
      // if(sessionStorage.getItem('signpic')&&sessionStorage.getItem('signpic')!='null')
      // {
      //   this.uploadImage5=sessionStorage.getItem('signpic')
      //   this.sign=true;
      // }

  },
  methods:{
 toshipin(){
              this.$router.push({  
             path:'/files/shipinlist',   
      })

    },
        tozuopin(){
              this.$router.push({  
        path:'/files/zuopin',   
      })

    },
     showPopup(data) {
            this.popcontent=data;
            // console.log(this.popcontent)
            this.show2 = true;
    },
getimgsrc(data){
      
      this.havesign=true;
       this.uploadImage5=data;
       
      //  console.log("我的图片的地址："+this.imgsrc);
       this.show2 = false;
  

     },
     tijiao()
     {
        if(this.havesign)
            this.uploadqianming(this.uploadImage5);
            else
            this.$toast('您还未签名')
     },
       uploadqianming(base64str){
      
        this.uploadtag=9;
       this.UpladFile(null,base64str);
    },
     UpladFile(fileObj,base64str) {
            // var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
              var form = new FormData(); // FormData 对象
            var isbase64=0;
            // console.log('base64str:'+base64str)
            //  console.log('fileobj:'+fileObj)
            if(base64str)
                  isbase64=1;
            var url =  "/dev-api/mapi/customer/uploadsign" // 接收上传文件的后台地址
            if(fileObj)
            {
          
            form.append("file", fileObj); // 文件对象
            }
            else{
              var dataurl=base64str;
     var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
    u8arr[n] = bstr.charCodeAt(n);
}
var obj = new Blob([u8arr], {type:mime});
 
form.append("file", obj,"xysign.png");
            }


            this.xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
            this.xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
            this.xhr.onload = this.uploadComplete; //请求完成
            this.xhr.onerror =  this.uploadFailed; //请求失败
         var _this=this;
            this.xhr.upload.onprogress = this.progressFunction;//【上传进度调用方法实现】
            this.xhr.upload.onloadstart = function(){//上传开始执行方法
              // var  ot = new Date().getTime();   //设置上传开始时间
              //  var  oloaded = 0;//设置上传开始时，以上传的文件大小为0
              _this.show=true;
              // _this.$loadingshow();
              _this.rate=100;
              _this.currentRate=0;
              _this.text='';
               
               
            };

            this.xhr.send(form); //开始上传，发送form数据

        },
   //上传成功响应
          uploadComplete(evt) {
            //服务断接收完文件返回的结果
               this.show=false;
               this.$loadingclose();
            var data = JSON.parse(evt.target.responseText);
            // console.log('服务器响应')
            console.log(data)
            if(data.success) {
              console.log('上传成功')
                this.$toast("签约成功！");
                this.sign=true;
                sessionStorage.setItem('signpic',data.result)
                // this.uploadImage5=data.result;
                // this.uploadsuccess(data.result);
            }else{
                this.$toast(data.message);
            }

        },
        //上传失败
          uploadFailed(evt) {
                 this.show=false;
                  this.$loadingclose();
            this.$toast("上传失败！");
        },
        //取消上传
          cancleUploadFile(){
                 this.show=false;
                  this.$loadingclose();
            this.xhr.abort();
        },

  //上传进度实现方法，上传过程中会频繁调用该方法
          progressFunction(evt) {
            // var progressBar = document.getElementById("progressBar");
            // var percentageDiv = document.getElementById("percentage");
            // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
            if (evt.lengthComputable) {//
                // progressBar.max = evt.total;
                 // progressBar.value = evt.loaded;
                // this.rate=evt.total;
               
                this.currentRate = Math.round(evt.loaded / evt.total * 100);
               
                this.text = Math.round(evt.loaded / evt.total * 100) + "%";
                console.log(this.currentRate)
                  if(evt.loaded==evt.total)
                {
                   this.$loadingshow();
                }
            }
            else
            {
            
            }
             
        },

  }
}
</script>

<style lang="scss" scoped>
.documentation-container {
  // margin: 50px;
  .document-btn {
    float: left;
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
   .popstyle{
        width: 100%;
        height: 30%;
    }
    .userfile{
    width: 90px;
    height: 30px;
    background: cornflowerblue;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}
</style>
